<template>
  <div>
<!-- 搜索栏 -->
    <el-form :inline="true" :model="state.articleSearch">
      <el-form-item label="文章标题" style="font-weight: bold">
        <el-input style="width: 130px" v-model="state.articleSearch.title" placeholder="请输入文章标题" clearable />
      </el-form-item>
      <el-form-item label="分类名" style="font-weight: bold">
        <el-select style="width: 130px" v-model="state.articleSearch.categoryId" filterable clearable reserve-keyword
                   @change='searchList' placeholder="请选择分类"
        >
          <el-option v-for="item in state.categoryList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="发布状态" style="font-weight: bold">
        <el-select style="width: 130px" v-model="state.articleSearch.isPublish" filterable clearable reserve-keyword
                   @change='searchList' placeholder="是否发布"
        >
          <el-option v-for="item in state.publishList" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search"  @click="searchList" type="primary">查找</el-button>
        <el-button :icon="Refresh"  @click="clearSearch" >重置</el-button>
      </el-form-item>
    </el-form>
<!-- 工具栏 -->
    <el-row :span="10">
      <el-button :icon="Plus"  @click="handleAdd" type="primary">新增</el-button>
      <el-button :icon="Delete"  :disabled="!multipleBlogSelect.length"  @click="multipleDelete" type="danger">批量删除</el-button>
    </el-row>
<!-- 表格栏 -->
    <div style="margin-top: 8px">
      <el-table
          max-height="550px"
          border
          :data="state.articles"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column
            width="170"
            align="center"
            label="文章封面">
          <template #default="scope">
            <el-image
                class="article-cover"
                :src="scope.row.coverImage"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="博客标题" width="280px"/>
        <el-table-column align="center" width="110" label="类型">
          <template #default="scope">
            <div v-for="(item, index) in state.isOriginalList">
              <el-tag
                  :type="scope.row.isOriginal === 0 ? 'warning':'success'"
                  v-if="index === scope.row.isOriginal"
              >{{ item }}</el-tag>
            </div>

          </template>
        </el-table-column>
        <el-table-column align="center" width="120" label="分类">
          <template #default="scope">
            <el-tag
                style="margin-left: 3px"
                align="center"
                type="success"
            >{{ scope.row.categoryName }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" width="220" label="标签">
          <template #default="scope">
            <el-tag
                style="margin-left: 3px"
                align="center"
                v-for="(item) in scope.row.tags"
            >{{item}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="viewCounts" label="浏览数量" width="100px" />
        <el-table-column align="center" prop="commentCounts" label="评论数量" width="100px"/>
        <el-table-column align="center" prop="createTime" label="创建时间" width="180px" sortable />
        <el-table-column prop="isWeight" align="center" width="120" label="置顶">
          <template #default="scope">
            <el-switch
                v-model="scope.row.isWeight"
                :active-value="1"
                :inactive-value="0"
                @change="handleTop(scope)"
                active-color="#13ce66">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="isComment" align="center" width="120" label="开启评论">
          <template #default="scope">
            <el-switch
                v-model="scope.row.isComment"
                :active-value="1"
                :inactive-value="0"
                @change="handleComment(scope)"
                active-color="#13ce66">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="220px" fixed="right">
          <template #default="scope">
            <el-button v-if="scope.row.isPublish === 1" size="small" type="info" @click="offPublish(scope.$index, scope.row)">
              下架
            </el-button>
            <el-button v-if="scope.row.isPublish === 0" size="small" type="success" @click="onPublish(scope.$index, scope.row)">
              发布
            </el-button>
            <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

<!-- 分页栏 -->
    <div>
      <div class="pagination-block">
        <el-pagination
            v-model:currentPage="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50]"
            :small="false"
            :disabled="false"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>

import {reactive, ref} from "vue";
import {ElNotification, ElTable} from "element-plus";
import { Search,Refresh,Plus,Delete} from '@element-plus/icons-vue'
import request from "../../utils/request.js";
import router from "../../router";
import {changeComment, changePublish, multipleRemove, remove, top} from "../../api/blog.js";
import store from "../../store";

const state = reactive({
  articles: [],
  articleSearch: {
    title: '',
    categoryId: '',
    isPublish: ''
  },
  publishList: [{id: 0,name: "下架"},{id: 1,name: "发布"}],
  isOriginalList: ["原创","转载"],
  categoryList: [{id: 0,name: '随记'},{id: 1,name: '好玩'}],
})

// 批量选中的数据
const multipleBlogSelect = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const totalSize = ref(0)

const handleEdit = (index: number, row: any) => {
  store.commit('addEditBlogId',row.id);
  router.push('/editBlog');
}
const handleDelete = (index: number, row: any) => {
  remove(row).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: res.msg,
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: '删除失败',
        type: 'error',
      })
      searchList();
    }
  })
}
const offPublish = (index: number, row: any) => {
  changePublish(row.id).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: "下架成功",
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: '下架失败',
        type: 'error',
      })
      searchList();
    }
  })
}
const onPublish = (index: number, row: any) => {
  changePublish(row.id).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: "上架成功",
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: '发布失败',
        type: 'error',
      })
      searchList();
    }
  })
}
const handleAdd = () => {
  router.push('/editBlog');
}
const multipleDelete = () => {
  multipleRemove(multipleBlogSelect.value).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: res.msg,
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: '删除失败',
        type: 'error',
      })
      searchList();
    }
  })
}
const searchList = () => {
  request.get("/blog/list",{
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      title: state.articleSearch.title,
      categoryId: state.articleSearch.categoryId,
      isPublish: state.articleSearch.isPublish
    }
  }).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      console.log(res)
      currentPage.value = res.data.current
      pageSize.value = res.data.size
      totalSize.value = res.data.total
      state.articles = res.data.records
    }
  })
}
const handleTop = (scope: any) => {
  top(scope.row.id).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: "成功",
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: '失败',
        type: 'error',
      })
      searchList();
    }
  })
}
const handleComment = (scope: any) => {
  changeComment(scope.row.id).then((res:any) => {
    if(res.code == '200' || res.code == 200){
      ElNotification({
        title: 'success',
        message: "成功",
        type: 'success',
      })
      searchList();
    }else {
      ElNotification({
        title: 'error',
        message: '失败',
        type: 'error',
      })
      searchList();
    }
  })
}
const clearSearch = (index: number, row: any) => {
  state.articleSearch.title = '';
  state.articleSearch.categoryId = '';
  state.articleSearch.isPublish = '';
  searchList();
}

// 选中复选框后
const handleSelectionChange = (val: any) => {
  multipleBlogSelect.value = val
}
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  searchList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  searchList()
}
const getAllCategory = ()=>{
  request.get("/category/getAllCategory").then((res:any)=>{
    state.categoryList = res.data;
  })
}
getAllCategory()
searchList()
</script>

<style scoped lang="scss">
.pagination-block{
  margin-top: 10px;
  float: right;
}
</style>
